import HttpUtils from "@page/common/utils/HttpUtils";
import "./style.scss";
class ShopTab extends React.Component {
    constructor() {
        super();
        this.state = {
            dropIsOpen: "none",
            tabList: null
        };
    }
    componentDidMount() {
        this.getCategory();
    }

    //获取分类列表
    getCategory() {
        const { id } = this.props;
        let params = { apiVersion:'V2',findModel: { supplierId: id } };
        HttpUtils.getCategory(params)
            .then(res => {
                this.setState({
                    tabList: res.categorys
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    //切换分类
    tabClick(id) {
        this.props.changeTab(id);
    }

    //下拉
    handleDown(index) {
        this.setState({
            [`dropIsOpen${index}`]: "block"
        });
    }

    //收起
    handleUp(index) {
        this.setState({
            [`dropIsOpen${index}`]: "none"
        });
    }

    render() {
        const { tabList } = this.state;
        return (
            <div className="rj_shop_tab">
                <div className="rj_tab-wp">
                    <div
                        className="rj_first-select"
                        onClick={()=>{
                            $state.go({
                                stateName: "/supplierShop",
                                params: {
                                    suppId: $state.params.suppId,
                                }
                            });
                        }}
                    >
                        首页
                    </div>
                    {tabList &&
                        tabList.map((item, index) => {
                            if (index < 8) {
                                return (
                                    <div
                                        key={item.id}
                                        className="rj_other-select zen_ps-re"
                                        onMouseOver={this.handleDown.bind(
                                            this,
                                            index
                                        )}
                                        onMouseLeave={this.handleUp.bind(
                                            this,
                                            index
                                        )}
                                    >
                                        <div
                                            onClick={()=>{
                                                $state.go({
                                                    stateName: "/supplierShop",
                                                    params: {
                                                        suppId: $state.params.suppId,
                                                        categoryId:item.id
                                                    }
                                                });
                                            }}
                                            className="rj_shop_item zen_ps-re"
                                            
                                        >
                                            {item.name}
                                        </div>

                                        {item.childModel && (
                                            <div
                                                style={{
                                                    display:
                                                        this.state[
                                                            `dropIsOpen${index}`
                                                        ] || "none"
                                                }}
                                                onMouseOver={this.handleDown.bind(
                                                    this,
                                                    index
                                                )}
                                                onMouseLeave={this.handleUp.bind(
                                                    this,
                                                    index
                                                )}
                                                className={Uts.sc([
                                                    "rj_l-drop-menu"
                                                ])}
                                            >
                                                <ul className="rj_l-drop-ul">
                                                    {item.childModel.map(
                                                        (it, i) => {
                                                            return (
                                                                <li
                                                                    onClick={()=>{
                                                                        $state.go({
                                                                            stateName: "/supplierShop",
                                                                            params: {
                                                                                suppId: $state.params.suppId,
                                                                                categoryId:it.id
                                                                            }
                                                                        });
                                                                    }}
                                                                    key={i}
                                                                >
                                                                    {it.name}
                                                                </li>
                                                            );
                                                        }
                                                    )}
                                                </ul>
                                            </div>
                                        )}
                                    </div>
                                );
                            }
                        })}
                </div>
            </div>
        );
    }
}

export default ShopTab;
